<template>
  <div class="dynamic-menu">
    <a-menu
      v-model:selectedKeys="selectedKeys"
      v-model:openKeys="openKeys"
      mode="inline"
      theme="light"
      :inline-collapsed="collapsed"
      class="menu"
      style="height: 100%;"
    >
      <MenuRecursive
        v-for="menu in menus"
        :key="menu.id"
        :menu="menu"
        @menu-click="handleMenuClick"
      />
    </a-menu>
  </div>
</template>

<script setup>
import { ref, onMounted, watch, provide } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { UserOutlined, TeamOutlined, MenuOutlined, SettingOutlined, HomeOutlined } from '@ant-design/icons-vue'
import { useMenuStore } from '@/store/menu'
import MenuRecursive from './MenuRecursive.vue'

const props = defineProps({
  collapsed: {
    type: Boolean,
    default: false
  }
})

const router = useRouter()
const route = useRoute()
const menuStore = useMenuStore()
const menus = ref(menuStore.menuTree || []);
const selectedKeys = ref([])
const openKeys = ref([])

const iconMap = {
  'UserOutlined': UserOutlined,
  'TeamOutlined': TeamOutlined,
  'MenuOutlined': MenuOutlined,
  'SettingOutlined': SettingOutlined,
  'HomeOutlined': HomeOutlined,
  'setting': SettingOutlined,
  'user': UserOutlined,
  'peoples': TeamOutlined,
  'tree-table': MenuOutlined
}
const getIcon = (iconName) => iconMap[iconName] || HomeOutlined

const loadMenus = async () => {
  menus.value = await menuStore.fetchMenuTree() || []
}

const handleMenuClick = (menu) => {
  if (menu.path) {
    router.push(menu.path)
  }
}

const setSelectedMenu = () => {
  const findMenu = (menuList, path) => {
    for (const menu of menuList) {
      if (menu.path === path) return menu
      if (Array.isArray(menu.children) && menu.children.length > 0) {
        const found = findMenu(menu.children, path)
        if (found) return found
      }
    }
    return null
  }
  const currentMenu = findMenu(menus.value, route.path)
  if (currentMenu) {
    selectedKeys.value = [String(currentMenu.id)]
    // 展开父菜单
    const findParent = (menuList, childId, parents=[]) => {
      for (const menu of menuList) {
        if (Array.isArray(menu.children) && menu.children.some(child => String(child.id) === String(childId))) {
          return [...parents, String(menu.id)]
        }
        if (Array.isArray(menu.children) && menu.children.length > 0) {
          const parent = findParent(menu.children, childId, [...parents, String(menu.id)])
          if (parent.length) return parent
        }
      }
      return []
    }
    openKeys.value = findParent(menus.value, currentMenu.id)
  }
}

watch(() => route.path, setSelectedMenu, { immediate: true })
watch(() => menus.value, setSelectedMenu, { deep: true })

onMounted(() => {
  if (!menuStore.menuTree) {
    menuStore.fetchMenuTree().then(tree => {
      menus.value = tree || [];
    });
  } else {
    menus.value = menuStore.menuTree;
  }
});

// 提供给子组件递归用
provide('getIcon', getIcon)
</script>

<style scoped>
.dynamic-menu {
  height: 100%;
  min-height: 100vh;
  overflow-y: auto;
}
.menu {
  border-right: none;
  height: 100%;
  background: linear-gradient(180deg, #7ec8e3 0%, #a8b6ff 60%, #e0e7ff 100%) !important;
  color: #5e7cff !important;
}
.menu .ant-menu-item,
.menu .ant-menu-submenu-title {
  background: transparent !important;
  color: #5e7cff !important;
}
.menu .ant-menu-item-selected,
.menu .ant-menu-item-active,
.menu .ant-menu-submenu-title-active {
  background: rgba(168,182,255,0.32) !important;
  color: #7ec8e3 !important;
  font-weight: bold;
}
.menu .ant-menu-item:hover,
.menu .ant-menu-submenu-title:hover {
  background: rgba(168,182,255,0.18) !important;
  color: #a8b6ff !important;
}
.menu .anticon {
  color: #5e7cff !important;
}
.menu-item-content {
  display: flex;
  align-items: center;
  gap: 8px;
}
.menu-title {
  font-size: 14px;
}
</style>